<template>
    <div class="login">
        <div class="log">
            <img :src="systemData.pic" alt="">
            <div class="logi">
                <p class="p1">{{systemData.brandname}} | 商城</p>
                <p class="p2">{{systemData.Advertisement}}</p>
            </div>
        </div>
        <div class="inmn">
            <div class="item ste">
                <p class="p2 fullp">中国大陆</p>
            </div>
            <div class="item ste">
                <p class="p2 l">+86</p>
                <div style="width: 2px;height: 100%;background: #f5f5f5"></div>
                <input placeholder="请输入手机号码"
                       v-model="phone"
                       class="full1"
                       type="number"
                       pattern="[0-9]*"
                       onkeypress='return( /[\d]/.test(String.fromCharCode(event.keyCode) ) )'
                >
                <div class="statecss" v-show="statephone">
                    <p v-text="txtphone"></p>
                    <svg class="icon" aria-hidden="true">
                        <use :xlink:href="stateicon"></use>
                    </svg>
                </div>
            </div>
            <div class="item" v-show="ismodify===1">
                <input placeholder="输入登录密码" class="full" v-model="password" type="password">
            </div>
        </div>
        <!--验证码部分-->
        <div class="inmn" style="margin-top: 2vw" v-show="ismodify===0">
            <div class="item2">
                <div class="int">
                    <input placeholder="请输入验证码"
                           pattern="[0-9]*"
                           type="number"
                           v-model="code"
                           maxlength="6"
                    >
                </div>
                <div class="r">
                    <p class="p4" :class="" @click="getCode">
                        {{codetxt}}
                    </p>
                </div>
            </div>
        </div>
        <div class="txt">
            <p class="p3" @click="findPass">找回密码</p>
            <p class="p4" @click="findCustomer">咨询客服</p>
        </div>
        <div class="txt1" @click="findAccount">
            <!--<p class="p3">账号找回</p>-->
        </div>
        <div class="btn-db">
            <button-normal
                    widthPro="200"
                    heightPro="35"
                    textBtn="登录"
                    color="#fff"
                    size="14"
                    @click.native="sure"
            ></button-normal>
            <div class="line"></div>
            <button-normal-hollow
                    widthPro="200"
                    heightPro="35"
                    textBtn="注册"
                    color="#BF2071"
                    size="14"
                    @click.native="registerTo"
            ></button-normal-hollow>
            <p class="vide">
                老用户登录流程，请点击 <span @click="videOne">这里</span><br/>
                若手机号码已弃用，请点击<span @click="videTwo">这里</span></p>
        </div>
        <div class="line-txt">
            <div class="se"></div>
            <p class="p1">或用微信快捷方式登录</p>
            <div class="se"></div>
        </div>
        <div class="btn-nav" v-show="stateWx">
            <div class="nav" @click="quickLogin">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-weixin"></use>
                </svg>
                <p class="p1">微信</p>
                <p class="p2">{{textWx1}}<span>{{textWx2}}</span>{{textWx3}} <span>{{textWx4}}</span>{{textWx5}}</p>
            </div>
        </div>
        <confirm
                :title="alertMsg"
                :text="textConfirm1"
                :isAlert="false"
                ref="wechat"
                confirmBtnText="去跳转"
                @confirm="weFirm"></confirm>
        <div class="table-icon" @click="checkSystem">
            <div class="img-icon">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-icon-defuben12"></use>
                </svg>
            </div>
            <div>选择系统</div>
        </div>
    </div>
</template>

<script>
    import API from '../request/api';
    import {Toast} from 'vant';
    import buttonNormal from '../components/common/buttonNormal';
    import ButtonNormalHollow from '../components/common/buttonNormalHollow';
    import {debounce} from '@/common/utils';
    import {sysMixin} from '@/common/mixin';
    import regular from '@/common/regular';
    import Confirm from '@/components/common/confirm';
    import {baseUrl} from '../config';

    export default {
        name: 'login',
        components: {ButtonNormalHollow, buttonNormal, Confirm},
        mixins: [sysMixin],
        data() {
            return {
                dealshow: false,
                phone: '',
                code: '',
                type: 1,
                password: '',
                statephone: false, //手机号是否不对，true为不正确
                txtphone: '', // 手机号校验文本
                stateicon: '#icon-dui',// 对好还是叉号
                ismodify: 1, //是否修改过密码，0没有修改过 1修改过了
                codetxt: '获取', // 验证码校验文本
                stateSendCode: true, //验证码是否可以发送
                stateWx: false, // 是否可以微信快捷登录
                textWx1: '', // 微信快捷登录文本
                textWx2: '', // 微信快捷登录文本
                textWx3: '', // 微信快捷登录文本
                textWx4: '', // 微信快捷登录文本
                textWx5: '', // 微信快捷登录文本
                alertMsg: '提示',
                textConfirm1: '',
                systemId: '', // 系统号(跳转的)
            };
        },
        computed: {},
        watch: {},
        methods: {
            checkSystem() {
                //选择系统
                let sys = this.system.substr(0, 1);
                if (sys == 2) {
                    // 倩庄
                    window.location.href = 'https://aryv3.ishangtui.com/qianz.html';
                } else if (sys == 3) {
                    // 母婴
                    window.location.href = 'https://aryv3.ishangtui.com/baby.html';
                } else {
                    // 爱润妍列表
                    window.location.href = 'https://aryv3.ishangtui.com/customer.html';
                }
            },
            findCustomer() {
                //    客服咨询
                window.location.href = `https://webchat.7moor.com/wapchat.html?accessId=95145560-4f70-11e9-bdb0-9354e1ad17a8`;
            },
            videOne() {
                if (this.system == 1001 || this.system == 1005 || this.system == 1006) {
                    window.location.href = `http://mp.weixin.qq.com/s?__biz=MzUyNjM5NTcwOA==&mid=100003562&idx=1&sn=080a618f659f9e74839068be5df4e2f1&chksm=7a0e3eb94d79b7af875b522d5bdc7abcb5dc38eb73dc48f3d2597fedd3cf6e110136d2efbd4f#rd`;
                } else {
                    window.location.href = `http://mp.weixin.qq.com/s?__biz=MzUyNjM5NTcwOA==&mid=100003562&idx=2&sn=57f42f0bacb68556291f9f1140f3290d&chksm=7a0e3eb94d79b7af7033530271a2e715fcd6cbd2af249312b956eae9223acb17d0decf82373f#rd`;
                }
            },
            videTwo() {
                window.location.href = `http://mp.weixin.qq.com/s?__biz=MzUyNjM5NTcwOA==&mid=100003562&idx=3&sn=e3aeedeca038b6ac0fa26e4a372a8500&chksm=7a0e3eb94d79b7afa61d223d845ac648125f143eff373ab225279e6b40d1b81288edc111c675#rd`;
            },
            weFirm() {
                // 跳转已经注册过的系统
                this.$router.push({
                    name: 'welcome',
                    query: {
                        system: this.systemId
                    }
                });
            },
            // 监听具体数据变化，并做相应的处理
            checkPhone() {
                //监听手机号来做一些现实上的处理
                if (!regular.REGEX_CHINA_MOBILE.test(this.phone)) {
                    this.txtphone = '手机号不正确';
                    this.stateicon = '#icon-cuo';
                    this.statephone = true;
                } else {
                    // // 手机号合规，然后去后台查询该手机号有没有修改过密码
                    this.request.post(API.signPhone2, {phone: this.phone}).then((res) => {
                        if (res.status == 1) {
                            // 已注册
                            this.statephone = true;
                            this.txtphone = '可以使用';
                            this.stateicon = '#icon-dui';
                        } else {
                            //    未注册 ,弹窗
                            this.txtphone = '未注册';
                            this.stateicon = '#icon-cuo';
                            this.statephone = true;
                            if (res.system != '0') {
                                // 在别的系统有账号,提示他去那个系统
                                this.systemId = res.system;
                                this.textConfirm1 = `您在${res.systemname}已注册账号，是否跳转？`;
                                this.$refs.wechat.show();
                            }
                        }
                        this.statephone = true;
                    });
                    this.isModify();
                    // this.stateSendCode = true;
                }
            },
            quickLogin() {
                // 快捷登录
                this.request.post(API.signin, {isquick: 1}).then((res1) => {
                    //    登录成功
                    this.$store.commit('setToken', res1.token); // 本地存token
                    this.$store.commit('setTokenType', res1.token_type || '1');
                    //    获取userinfo
                    this.request.get(API.getUserInfo).then((res) => {
                        this.$store.commit('setUserInfo', res);
                        //  更新tokenArray
                        let tokenArray = JSON.parse(localStorage.getItem('tokenArray'));
                        if (tokenArray) {
                            // 原来有就更新
                            tokenArray[res1.system] = {token: res1.token, userInfo: res};
                            this.$store.commit('setTokenArray', tokenArray);
                        } else {
                            // 没有就新建本地tokenArray
                            let tokenArrayFirst = {};
                            tokenArrayFirst[res1.system] = {token: res1.token, userInfo: res};
                            this.$store.commit('setTokenArray', tokenArrayFirst);
                        }
                        //    上传推荐人id和系统号
                        let upData = {
                            referrer: this.$store.state.login.refer.referid, // 推荐人id
                            system: this.$store.state.login.system // 系统好
                        };
                        this.request.get(API.referUp, upData).then((res) => {
                            // 调用首页店主推荐品牌接口0530
                            this.request.get(API.frontGetBrand, {
                                referid: upData.referrer
                            }).then((res) => {
                                this.$store.commit('setFrontBrand', res);
                                if (this.$store.state.user.way == 'app') {
                                    // 扫app进入且注册
                                    this.$router.replace('app-code2');
                                } else {
                                    this.$router.push({
                                        name: 'front'
                                    });
                                }
                            });
                        });
                    }, (err) => {
                    }).catch((err) => {
                        this.$toast.fail(err);
                    });
                    // 登录成功，推购物车数据
                    if (this.$store.state.online.cart.cartList) {
                        this.request.post(API.onlineGetCartListPush, {
                            cartList: this.$store.state.online.cart.cartList
                        }).then((res) => {
                            this.$store.commit('addToCart_online', '');
                        }, (res) => {
                        });
                    }
                });
            },
            registerTo() {
                //去注册隐藏当前显示注册
                this.$router.replace({
                    name: 'register'
                });
            },
            isModify() {
                //手机号是不是被修改过了
                let data = {
                    // phone: '15668353128'
                    phone: this.phone
                };
                this.request.get(API.ismodify, data).then((res) => {
                    this.ismodify = res.ismodify;
                    //    根据ismodify状态，选择登录方式（验证码还是密码）
                    //    0找回密码 1 密码登录
                    if (this.ismodify === 0) {
                        this.$store.commit('phone', this.phone);
                        // this.type = 3;
                    } else if (this.ismodify === 1) {
                        this.type = 1;
                    }
                }, (err) => {

                });
            },
            getCode() {
                // 获取验证码方法
                if (!this.phone || this.txtphone === '手机号不正确') {
                    Toast('请先填写手机号');
                } else {
                    let data = {
                        'phone': this.phone,
                        'type': this.type // 代表登录
                    };
                    if (this.stateSendCode) {
                        this.request.post(API.getCode, data).then((res) => {
                            //    验证码发送成功
                            this.stateSendCode = false;
                            this.setTime();
                        });
                    }

                }

            },
            setTime() {
                //    倒计时
                let demo = 70;
                this.codetxt = demo;
                let setTer = setInterval(() => {
                    if (demo > 0) {
                        this.codetxt = demo;
                        demo--;
                    } else {
                        clearInterval(setTer);
                        this.codetxt = '获取';
                        this.stateSendCode = true;
                        this.txtphone = '';
                    }
                }, 1000);
            },
            sure() {
                // 快捷登录和普通登录共用方法
                if (!this.phone) {
                    Toast('请先填写手机号');
                } else if (this.ismodify === 0) {
                    //   没有改过密码
                    if (this.code) {
                        //   没有改过密码并且验证码写了
                        //    调接口了该
                        this.loginTo(0);
                    } else {
                        Toast('请先填写验证码');
                    }

                } else if (this.ismodify === 1) {
                    if (this.password) {
                        //    改过密码并且密码写了
                        //    调接口了该
                        this.loginTo(1);
                    } else {
                        Toast('密码未填写');
                    }

                }
            },
            loginTo(ismodify) {
                //    登录接口
                let data = {
                    phone: this.phone
                };
                if (ismodify === 0) {
                    //没修改
                    if (!this.stateSendCode) {
                        //    获取过就允许发请求
                        data.code = this.code;
                    } else {
                        //    没获取过就不让发
                        Toast('请先获取手机验证码');
                        return false;
                    }

                } else if (ismodify === 1) {
                    //修改了
                    data.password = this.password;
                    data.system = this.$store.state.login.system;
                } else if (ismodify === 3) {
                    //    找回密码

                }
                this.request.post(API.signin, data).then((res1) => {
                    //    登录成功
                    this.$store.commit('setToken', res1.token); // 本地存token
                    this.$store.commit('setTokenType', '1');
                    this.$store.commit('setSystem', res1.system);
                    //    获取userinfo
                    this.request.get(API.getUserInfo).then((res) => {
                        this.$store.commit('setUserInfo', res);
                        //  更新tokenArray
                        let tokenArray = JSON.parse(localStorage.getItem('tokenArray'));
                        if (tokenArray) {
                            // 原来有就更新
                            tokenArray[res1.system] = {token: res1.token, userInfo: res};
                            this.$store.commit('setTokenArray', tokenArray);
                        } else {
                            // 没有就新建本地tokenArray
                            let tokenArrayFirst = {};
                            tokenArrayFirst[res1.system] = {token: res1.token, userInfo: res};
                            this.$store.commit('setTokenArray', tokenArrayFirst);
                        }
                        //    上传推荐人id和系统号
                        let upData = {
                            referrer: this.$store.state.login.refer.referid, // 推荐人id
                            system: this.$store.state.login.system // 系统好
                        };
                        this.request.get(API.referUp, upData).then((res) => {
                            // 调用首页店主推荐品牌接口0530
                            this.request.get(API.frontGetBrand, {
                                referid: upData.referrer
                            }).then((res) => {
                                this.$store.commit('setFrontBrand', res);
                                if (this.$route.query.direct) {
                                    this.direct = this.$route.query.direct;
                                    this.$router.replace({
                                        name: this.direct
                                    });
                                } else {
                                    if (this.$store.state.user.way == 'app') {
                                        // 扫app进入且注册
                                        this.$router.replace('app-code2');
                                    } else {
                                        this.$router.push({
                                            name: 'front'
                                        });
                                    }
                                }
                            });
                        });
                    }, (err) => {
                    }).catch((err) => {
                        this.$toast.fail(err);
                    });
                    // 登录成功，推购物车数据
                    if (this.$store.state.online.cart.cartList) {
                        this.request.post(API.onlineGetCartListPush, {
                            cartList: this.$store.state.online.cart.cartList
                        }).then((res) => {
                            this.$store.commit('addToCart_online', '');
                        }, (res) => {
                        });
                    }

                }).catch((err) => {
                    this.$toast.fail(err);
                });
                console.log(data, 'datatattaattaatattaq');
            },
            deal() {
                this.dealshow = true;
            },
            findPass() {
                //    找回密码
                this.$router.push({
                    name: 'retrieve'
                });
            },
            findAccount() {
                //    账号找回
                this.$router.push({
                    name: 'account'
                });
            },
            checkWx() {
                //    是否可以微信登录
                this.request.post(API.canWxLogin).then((res) => {
                    console.log(res);
                    if (res) {
                        //     可以微信登录
                        this.stateWx = true;
                        this.textWx1 = '您之前ID为';
                        this.textWx2 = `${res.id}`;
                        this.textWx3 = `用户名为`;
                        this.textWx4 = `${res.info.nickname}`;
                        this.textWx5 = `,可以使用微信登录`;

                    } else {
                        //    不可以微信登录
                        this.stateWx = false;
                    }
                });
            }
        },
        beforeCreate() {
            // 可以在这加个loading事件，在加载实例时触发
            // 这个阶段实例的data、methods是读不到的
        },
        created() {
            this.phone = this.$store.state.login.phone;
            this.$watch(
                'phone',
                debounce((newVal) => {
                    this.checkPhone();
                }, 100)
            );
            this.checkWx();
            // 初始化数据，如在这结束loading事件，异步ajax请求也适宜在这里调用
            // 实例创建后：这个阶段已经完成了数据观测(data observer)，属性和方法的运算， watch/event 事件回调。
            // mount挂载阶段还没开始，"el" 属性目前不可见，数据并没有在DOM元素上进行渲染
        },
        beforeMount() {
            // 相关的 render 函数首次被调用。
        },
        mounted() {
            // 挂载元素，获取到DOM节点
            // el选项的DOM节点 被新创建的 vm的el 替换，并挂载到实例上去之后调用此生命周期函数。此时实例的数据在DOM节点上进行渲染
        },
        beforeUpdate() {
            // 数据更新时调用，但不进行DOM重新渲染，在数据更新时DOM没渲染前可以在这个生命函数里进行状态处理
        },
        updated() {
            //  如果对数据统一处理，在这里写上相应函数
        },
        beforeDestroy() {
            // 可以做一个确认停止事件的确认框
        },
        destroyed() {
            // Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁
        }
    };

</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
    @import '~assets/main.styl'
    .login {
        box-sizing border-box
        background #f5f5f5
        width 100vw
        flex-y(center, space-between)

        .table-icon {
            position: fixed;
            right: 6px;
            bottom: vw(40);
            flex-y();
            word-vw(word12, gray6);

            .img-icon {
                width: vw(42);
                height: vw(42);
                border-radius: all-radius;
                background: linear-gradient(to bottom right, #B13672, #FF53A7)
                flex-x(center)
                margin-bottom 6px

                .icon {
                    fill white
                    width vw(24)
                    height vw(24)
                }
            }
        }

        .log {
            height 30vw
            flex-x(center)

            img {
                width vw(66)
            }

            .logi {
                height 12vw
                flex-y(space-between, flex-start)
                padding-left 3vw
            }
        }

        .inmn {
            flex-y()
            margin 0 vw(15)
            border-radius main-radius
            background grayF

            .item {
                width 100%
                height vw(55)
                flex-x()

                .l {
                    flex 1
                    text-align center
                }

                .r {
                    flex 4
                    padding-left 20vw
                    box-sizing border-box
                }

                .m {
                    flex-x(center)
                }

                .fullp {
                    flex 4
                    text-align center
                    line-height vw(55)
                }

                .full {
                    flex 4
                    text-align center
                    height vw(25)
                    padding vw(10) 0
                }

                .full1 {
                    flex 4
                    text-align left
                    height vw(25)
                    padding vw(10) 0 vw(10) vw(60)
                }

                .statecss {
                    position absolute
                    right vw(30)
                    flex-x()

                    .icon {
                        margin-left vw(15)
                        fill main-color
                    }

                    p {
                        word-vw(word14, main-color)
                    }
                }
            }

            .ste {
                border-bottom 1px solid gray5
            }

            .item2 {
                flex-x(space-between)
                height vw(55)
                flex-x()
                width 100%

                .int {
                    flex 4
                    flex-x()
                    padding-left vw(15)

                    input {
                        height vw(55)
                    }
                }

                .r {
                    flex 1
                    background main-color
                    border-radius 0 main-radius main-radius 0
                    height vw(55)
                    flex-x(center)
                }
            }
        }

        .txt {
            flex-x(space-between)
            padding 0 vw(15)
            margin-top 4vw

            p {
                line-height vw(28)
            }

            .p4 {
                word-vw(14px, grayF)
                font-weight bold
                background main-color
                padding 0 2vw
                border-radius main-radius
            }
        }

        .txt1 {
            flex-x(space-between)
            padding 0 vw(15)

            p {
                line-height vw(28)
            }
        }

        .btn-db {
            .vide {
                word-vw(11px, gray9)
                text-align center
                line-height 1.6

                span {
                    word-vw(12px, main-color)
                    font-weight bold
                }
            }

            /*position absolute*/
            /*width 100vw*/
            /*bottom 0*/
        }

        .line-txt {
            flex-x()
            padding 0 vw(36)
            margin-top vw(24)

            .se {
                width vw(72)
                height 1px
                background #D8D8D8
            }

            .p1 {
                word-vw(11px, gray9)
            }
        }

        .btn-nav {
            flex-x(center)
            padding-top 4vw

            .nav {
                flex-y()

                .p1 {
                    word-vw(13px, gray3)
                    padding-top 2vw
                }

                .p2 {
                    word-vw(11px, gray9)
                    width 40vw
                    margin-top 3vw

                    span {
                        word-vw(11px, gray3)
                        font-weight bold
                    }
                }

                .icon {
                    width vw(38)
                    height vw(38)
                }
            }
        }

        .close {
            fill gray3
            position absolute
            right vw(20)
            arrow()
            top vw(20)
        }

        .fullInput {
            height vw(50)
            line-height vw(50)
            border-bottom 1px solid #efefef
            display flex
            justify-content space-between
            width 100%

            .pic {
                fill main-color
                width vw(20)
                height vw(20)
            }

            input {
                width 70%
            }
        }
        input:

        :placeholder {
            color gray9
        }

        .agree {
            height vw(50)
            line-height vw(50)
            display: flex;
            align-items: center;
            position relative
            color gray9

            .circle {
                border 1px solid gray6
                border-radius 50%
                width vw(15)
                height vw(15)
                box-sizing border-box
                margin-right vw(15)
            }

            .select {
                width vw(16)
                height vw(16)
                position absolute
                fill main-color
            }

            span {
                color gray3
            }
        }
    }

    .sure {
        background-color main-color
        position relative
        width 100vw
        text-align center
        height vw(50)
        line-height vw(50)
        left 0
        color grayF
    }
</style>
